<template>
  <div>
    <div v-if="playList" class="banner">
      <div class="u-hmsprt"></div>
      更新日期{{ playList.updateTime | formatDate }}
    </div>
    <ul class="newsong" v-if="hotSong.length > 0">
      <li v-for="(s, index) in hotSong" :key="s.id">
        <SongItem :item="s" @play="$emit('play', $event)">{{
          (index + 1) | formatNum
        }}</SongItem>
      </li>
    </ul>
    <Loading v-if="isLoading"></Loading>
    <div class="loadingmore" @click="loadMore" v-if="!isLoading">加载更多 ></div>
  </div>
</template>

<script>
import SongItem from "@/components/SongItem";
import Loading from "@/components/Loading";

export default {
  name: "Hot",
  data() {
    return {
      hotSong: [],
      playList: null,
      page: 1,
      isLoading: true,
    };
  },
  created() {
    this.loadMusic();
  },
  methods: {
    loadMusic() {
      this.$http
        .get("/playlist/detail?id=3778678")
        .then((data) => {
          let trackIDS = data.data.playlist.trackIds.slice(
            (this.page - 1) * 20,
            this.page * 20
          );
          // console.log(trackIDS);
          this.playList = data.data.playlist;
          let ids = trackIDS.map((d) => {
            return d.id;
          });
          return ids.join(",");
        })
        .then((ids) => {
          //   获取数据详情
          this.$http
            .get("/song/detail?ids=" + ids)
            .then((songData) => {
              this.isLoading = false;
              songData.data.songs.map((d) => {
                d.song = {
                  artists: d.ar,
                };
                this.hotSong.push(d);
                return d;
              });
            });
        });
    },

    // 加载更多
    loadMore() {
      this.page++;
      if (this.page >= 10) {
        return false;
      }
      this.isLoading = true;
      this.loadMusic();
    },
  },
  components: {
    SongItem,
    Loading,
  },
  filters: {
    formatDate(val) {
      let date = new Date(val);
      return date.getMonth() + 1 + "月" + date.getDate() + "日";
    },

    formatNum(val) {
      if (val < 10) {
        return "0" + val;
      }
      if (val >= 10) {
        return val;
      }
    },
  },
};
</script>
<style lang="less">
.banner {
  width: 100%;
  height: 135px;
  padding-top: 20px;
  padding-left: 20px;
  box-sizing: border-box;
  overflow: hidden;
  background: url(../assets/hot_music_bg_2x.jpg)
  // background: url(//s3.music.126.net/mobile-new/img/hot_music_bg_2x.jpg?f01a252…=)
    no-repeat;
  background-size: cover;
  color: white;
  font-size: 14px;
  .u-hmsprt {
    width: 142px;
    height: 67px;
    background: url(//s3.music.126.net/mobile-new/img/index_icon_2x.png?5207a28c3767992ca4bb6d4887c74880=);
    background-repeat: no-repeat;
    background-position: -24px -30px;
    background-size: 166px 97px;
    margin-bottom: 7px;
  }
}
.loadingmore {
  // background-color: bisque;
  text-align: center;
  line-height: 40px;
  color: #7b7b7b;
}
.newsong {
  list-style: none;
  padding: 0px;
  li:nth-child(1),:nth-child(2),:nth-child(3){
    .num{
      color: #ec29ec;
      font-size: 18px;
    }
  }
}
</style>